<template>
  <div>
    <el-card class="vplay">
      {{this.$route.params.a.vTitle}}

      <video-player class="video-player vjs-custom-skin "
                    style="padding-left: 150px"
                    ref="videoPlayer"
                    :playsinline='false'
                    :options='videoOptions'
                    @play="onPlayerPlay($event)"
                    @pause='onPlayerPause($event)'
                    @statechagned='playerStateChanged($event)'
      >
      </video-player>
    </el-card>

  </div>
</template>

<script>
  import {videoPlayer} from 'vue-video-player'
  import 'videojs-flash'
  import VideoPlayer from './videoPlayer'
    export default {
      components:{
        VideoPlayer
      },
      props:{
        state:Boolean,
        videoUrl:String,
      },
      data(){
        return{
          videoOptions:{
            playbackRates:[1.0,1.5,2.0], // 播放速度
            autoplay:false, // 如果true，浏览器准备好时开始回放
            controls:true,
            muted:false, // 默认情况下将会消除任何音频
            loop:false, //循环播放
            preload:'auto', // <video>加载元素后立即加载视频
            language:'zh-CN',
            aspectRatio:'16:9', //流畅模式，并计算播放器动态大小时使用该值
            fluid:true, //按比例缩放以适应容器
            sources:[{
              src: require('/Users/lixiang/Downloads/sucai/'+this.$route.params.a.vPath),
              type:'video/mp4'
            }],
            poster:require('/Users/lixiang/Downloads/sucai/'+this.$route.params.a.poster), // 封面地址
            notSupportedMessage:'此视频暂无法播放，请稍后再试',
          }
        }
      },
      watch:{
        videoUrl:function(val){
          if(val !==''){
            this.$refs.videoPlayer.player.src(val)
          }
        },
        state:function(val){
          if(val){
            this.$refs.videoPlayer.player.pause()
          }
        }
      },
      methods:{
        onPlayerPlay(player){
          console.log('player')
        },
        onPlayerPause(player){
          console.log('pause')
        },
        playerStateChanged(player){
          console.log('changed')
        }
      },
      computed:{
        player(){
          return this.$refs.videoPlayer.player
        }
      },
      mounted(){

      }
    }
</script>
<style scoped>
  .vplay{
    margin: 20px auto;
    width: 1100px;
    height: 480px;
  }
  #vjs_video_3{
    height:400px;
    width:100%;
  }
  .vjs-custom-skin{
    width:70% !important;
    height:400px !important;
  }

</style>


